<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/tree.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/toolbar.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/panel.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/upload-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/toolbar-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/panel-2.0.0.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
    <style>
        #wrap {
            width: 100%;
            height: 100%;
            padding: 10px 10px;
        }  
        .section-title{
            padding:12px 0;

        }    
    </style>
</head>

<body>
    <div id="wrap" class="k_box_size">
        <h1 class="section-title">多文件点击上传--demo</h1>
        <div style="position: relative;"><span id="upload1"></span><span style="position: absolute;top:0px;left:300px;"><button onclick="uploadFiles(this)">上传</button></span></div>
        <div>
            <h1 class="section-title">多文件自动上传--demo</h1>
            <div style="position: relative;"><span id="upload2"></span><span style="position: absolute;top:0px;left:300px;"></span></div>
           

        </div>
        <div>
            <h1 class="section-title">拖拽文件自动上传--demo</h1>
            <div style="position: relative;"><span id="upload3"></span><span style="position: absolute;top:0px;left:300px;"></span></div>
        </div>
        <div>
            <h1 class="section-title">拖拽文件点击上传--demo</h1>
            <div style="position: relative;"><span id="upload4"></span><span style="position: absolute;top:6px;left:300px;">
                <button onclick="uploadFiles2(this)">上传</button>
                <button onclick="clearFiles2(this)">清空</button>
            </span></div>
        </div>
    </div>

    <script type="text/javascript"> 
        var upObj1,upObj2;
        function uploadFiles(){
            upObj1.upload();
        }
        function uploadFiles2(){
            upObj2.upload();
        }
        function clearFiles2(){
            upObj2.clear(true);
        }
        function pageLoaded() {
            upObj1 = new $B.Upload("upload1",{
                // dislabel:true,
                // style:{padding: "2px 3px", "height": "25px", "margin-right": "0px","text-align":"center","background":"#837CDE"},
                timeout: 180, //超时时间 秒
                url: 'http://127.0.0.1:8888/test/upload',
                multiple: false, //是否可批量选择
                immediate: false, //选择文件后是否立即自动上传，即不用用户点击提交按钮就上传
                accept: '.json,.xml',   // 可上传的文件类型 .xml,.xls,.xlsx,.png
                onSelected: function(file,fileName){ //选择文件后的事件请返回true 以便通过验证  
                    console.log(fileName);
                    return true;
                }, 
                success: function(res, data){ //成功时候的回调
                    console.log("success ",res);
                }, 
                onDelected: function(res){//删除回调,function(res){ }
                    console.log("delete "+res);
                }, 
                setParams: function(){ //设置参数 return {}
                    return {"p":123455};
                },
                error: function (msg, res) { //错误回调
                    console.log("error ",res);
                } 
            });     
            
            new $B.Upload("upload2",{
                timeout: 180, //超时时间 秒
                url: 'http://127.0.0.1:8888/test/upload',
                multiple: true, //是否可批量选择
                immediate: true, //选择文件后是否立即自动上传，即不用用户点击提交按钮就上传
                accept: '.json,.xml',   // 可上传的文件类型 .xml,.xls,.xlsx,.png
                onSelected: function(file,fileName){ //选择文件后的事件请返回true 以便通过验证  
                    console.log(fileName);
                    return true;
                }, 
                success: function(res, data){ //成功时候的回调
                    console.log("success ",res);
                }, 
                onDelected: function(res){//删除回调,function(res){ }
                    console.log("delete "+res);
                }, 
                setParams: function(){ //设置参数 return {}
                    return {"p":123455};
                },
                error: function (msg, res) { //错误回调
                    console.log("error ",res);
                } 
            }); 
            
          new $B.Upload("upload3",{
                timeout: 180, //超时时间 秒
                dragUpload:true,
                accept: '.json',   // 可上传的文件类型 .xml,.xls,.xlsx,.png
                label:'请拖入文件于此',
                url: 'http://127.0.0.1:8888/test/upload',
                immediate: true, //选择文件后是否立即自动上传，即不用用户点击提交按钮就上传 
                onReader:function(btn){
                    btn.style.height = "100px";
                    $B.DomUtils.css(btn.firstChild,{
                        display:'block',
                        "text-align":"center",
                        "font-size":"25px"
                    });
                    $B.DomUtils.css(btn.lastChild,{
                        display:'block',
                        "text-align":"center",
                        "font-size":"16px"
                    });
                },              
                onSelected: function(file,fileName){ //选择文件后的事件请返回true 以便通过验证  
                    console.log(fileName);
                    return true;
                }, 
                success: function(res, data){ //成功时候的回调
                    console.log("success ",res);
                }, 
                onDelected: function(res){//删除回调,function(res){ }
                    console.log("delete "+res);
                }, 
                setParams: function(){ //设置参数 return {}
                    return {"p":123455};
                },
                error: function (msg, res) { //错误回调
                    console.log("error ",res);
                } 
            });   

            upObj2 = new $B.Upload("upload4",{
                timeout: 180, //超时时间 秒
                dragUpload:true,
                backgroundColor:"#6C2CF5",
                label:'请拖入文件于此',
                url: 'http://127.0.0.1:8888/test/upload',
                immediate: false, //选择文件后是否立即自动上传，即不用用户点击提交按钮就上传 
                onReader:function(btn){          
                    $B.DomUtils.css(btn,{
                        height:'100px'                       
                    });
                    $B.DomUtils.css(btn.firstChild,{
                        display:'block',
                        "text-align":"center",
                        "font-size":"25px"
                    });
                    $B.DomUtils.css(btn.lastChild,{
                        display:'block',
                        "text-align":"center",
                        "font-size":"16px"
                    });
                },              
                onSelected: function(file,fileName){ //选择文件后的事件请返回true 以便通过验证  
                    console.log(fileName);
                    return true;
                }, 
                success: function(mesage, data, res){ //成功时候的回调
                    console.log("success "+mesage);
                }, 
                onDelected: function(res){//删除回调,function(res){ }
                    console.log("delete "+res);
                }, 
                setParams: function(){ //设置参数 return {}
                    return {"p":123455};
                },
                error: function (err) { //错误回调
                    console.log("error "+res);
                } 
            });   
        };
        $B.DomUtils.onDomLoaded(function () {
            pageLoaded();
        });
    </script>
</body>

</html>